<template>
	<el-card shadow="never" body-style="padding:0;">
		<el-row :gutter="20" class="statistics pa-2">
			<el-col :md="8" :sm="12" :xs="24">
				<div class="num">{{ detail.scores || 0 }}</div>
				<div>累计积分(个)</div>
			</el-col>
			<el-col :md="8" :sm="12" :xs="24">
				<div class="num">{{ detail.scores || 0 }}</div>
				<div>已消耗(个)</div>
			</el-col>
			<el-col :md="8" :sm="12" :xs="24">
				<div class="num">{{ detail.scores || 0 }}</div>
				<div>可用积分(个)</div>
			</el-col>
		</el-row>
		<cl-data-table ref="table" :data="list" :columns="columns" :show-page="false" />
	</el-card>
</template>
<script>
function filterOptType(val) {
	switch (val) {
		case 1:
			val = "获取";
			break;
		case 2:
			val = "消费";
			break;
		default:
			val = "-";
			break;
	}
	return val;
}
export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			list: [],
			columns: [
				{ label: "获得/使用时间", prop: "addtime", width: 140 },
				{
					label: "获得/使用来源",
					prop: "opt_type",
					width: 140,
					formatter: row => filterOptType(row.opt_type)
				},
				{ label: "内容", prop: "pay_date", minWidth: 250 },
				{ label: "积分变动", prop: "pay_date", width: 140 }
			]
		};
	},
	methods: {
		async init() {
			const { cus_id } = this.detail;
			const data = await this.$service.customer.scorelist({
				cus_id
			});
			// console.log(data);
			this.list = data;
		}
	}
};
</script>
<style lang="scss" scoped>
.statistics {
	// border-bottom: 1px solid $border-main;
	.num {
		color: $color-warning !important;
	}
}
</style>
